<template>
    <div>
      <div>
        <el-row>
          <el-col :span="6" :offset="2">
            <el-card class="box-card">
              <header class="moyu_header">
                <div>
                  <span>百度热搜</span>
                </div>
                <div @click="handleChangeMobaidu()">
                  <span>换一换</span>
                </div>
              </header>
              <div class="moyu_content">
                <div class="moyu_content_item" v-for="item in baiduList" :key="item.Top" :title="item.Desc">
                  <div class="moyu_content_item_left">
                    <span :style="{color:item.Top < 4?'red':''}">{{item.Top}}</span>
                    <a :href="item.Url" target="_blank">
                      <span class="content" :style="{color:item.Top < 4?'red':''}">{{item.Title}}</span>
                    </a>
                  </div>
                  <span class="">{{item.ClickNum}}</span>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
</template>

<script>
export default {
  name: "moyu",
  data(){
    return{
      isClear: false,
      detail:"",
      baiduLists:[],
      baiduList:[],
      pageSize:10,
      pageNumer:0,
      pageTotal:0,
    }

  },
  created() {
    this.mobaidu()
  },
  methods:{
    async mobaidu(){
      this.pageNumberList = [];
      await this.$http.baiduMoyu().then(res=>{
        let retdata = res.Data
        this.baiduLists = retdata;
        this.pageTotal = Math.ceil(retdata.length/this.pageSize)-1;
        this.baiduList = retdata.slice(0,this.pageSize)
        console.log(this.pageTotal)

      }).catch(err=>{
        console.log(err)
      })
    },
    handleChangeMobaidu(){
      if(this.pageNumer < this.pageTotal){
        this.pageNumer = this.pageNumer + 1;
      }else{
        this.pageNumer = 0;
      }

      this.baiduList = this.baiduLists.slice(this.pageNumer*this.pageSize,(this.pageNumer+1)*this.pageSize)

      // console.log(this.pageNumer)
    },
    change(val) {
      console.log(val)

    },
  }
}
</script>

<style scoped lang="less">
@import "./index";
</style>